{% extends '__base__.html' %}

{% block title %}{{ blog.name }}{% endblock %}

{% block beforehead %}

<script>

var comment_url = '/api/blogs/{{ blog.id }}/comments';

$(function () {
    var $form = $('#form-comment');
    $form.submit(function (e) {
        e.preventDefault();
        $form.showFormError('');
        var content = $form.find('textarea').val().trim();
        if (content==='') {
            return $form.showFormError('请输入评论内容！');
        }
        $form.postJSON(comment_url, { content: content }, function (err, result) {
            if (err) {
                return $form.showFormError(err);
            }
            refresh();
        });
    });
});
</script>

{% endblock %}

{% block content %}

    <div class="uk-width-medium-3-4">
        <article class="uk-article">
            <h2>{{ blog.name }}</h2>
            <p class="uk-article-meta">发表于{{ blog.created_at|datetime }}</p>
            <p>{{ blog.html_content|safe }}</p>
        </article>

        <hr class="uk-article-divider">

    {% if __user__ %}
        <h3>发表评论</h3>

        <article class="uk-comment">
            <header class="uk-comment-header">
                <img class="uk-comment-avatar uk-border-circle" width="50" height="50" src="{{ __user__.image }}">
                <h4 class="uk-comment-title">{{ __user__.name }}</h4>
            </header>
            <div class="uk-comment-body">
                <form id="form-comment" class="uk-form">
                    <div class="uk-alert uk-alert-danger uk-hidden"></div>
                    <div class="uk-form-row">
                        <textarea rows="6" placeholder="说点什么吧" style="width:100%;resize:none;"></textarea>
                    </div>
                    <div class="uk-form-row">
                        <button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-comment"></i> 发表评论</button>
                    </div>
                </form>
            </div>
        </article>

        <hr class="uk-article-divider">
    {% endif %}

        <h3>最新评论</h3>

        <ul class="uk-comment-list">
            {% for comment in comments %}
            <li>
                <article class="uk-comment">
                    <header class="uk-comment-header">
                        <img class="uk-comment-avatar uk-border-circle" width="50" height="50" src="{{ comment.user_image }}">
                        <h4 class="uk-comment-title">{{ comment.user_name }} {% if comment.user_id==blog.user_id %}(作者){% endif %}</h4>
                        <p class="uk-comment-meta">{{ comment.created_at|datetime }}</p>
                    </header>
                    <div class="uk-comment-body">
                        {{ comment.html_content|safe }}
                    </div>
                </article>
            </li>
            {% else %}
            <p>还没有人评论...</p>
            {% endfor %}
        </ul>

    </div>

    <div class="uk-width-medium-1-4">
        <div class="uk-panel uk-panel-box">
            <div class="uk-text-center">
                <img class="uk-border-circle" width="120" height="120" src="{{ blog.user_image }}">
                <h3>{{ blog.user_name }}</h3>
            </div>
        </div>
        <div class="uk-panel uk-panel-header">
            <h3 class="uk-panel-title">友情链接</h3>
            <ul class="uk-list uk-list-line">
                <li><i class="uk-icon-link"></i> <a href="#">编程</a></li>
                <li><i class="uk-icon-link"></i> <a href="#">思考</a></li>
                <li><i class="uk-icon-link"></i> <a href="#">读书</a></li>
            </ul>
        </div>
    </div>

{% endblock %}
